<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="../src/jquery.typeahead.css">

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <!--script src="../dist/jquery.typeahead.min.js"></script-->
    <script src="../src/jquery.typeahead.js"></script>

</head>
<body>

<div style="width: 100%; max-width: 800px; margin: 0 auto;">

    <h1>Hockey_v1 Demo</h1>

    <ul>
        <li>
            <a href="http://www.runningcoder.org/jquerytypeahead/documentation/">Documentation</a>
        </li>
        <li>
            <a href="http://www.runningcoder.org/jquerytypeahead/demo/">Demos</a>
        </li>
    </ul>

    <form>
        <div class="typeahead__container">
            <div class="typeahead__field">

            <span class="typeahead__query">
                <input class="js-typeahead"
                       name="q"
                       type="search"
                       autofocus
                       autocomplete="off">
            </span>
            <span class="typeahead__button">
                <button type="submit">
                    <span class="typeahead__search-icon"></span>
                </button>
            </span>

            </div>
        </div>
    </form>

    <script>

        var data = [{
            "name": "Ducks",
            "img": "ducks",
            "city": "Anaheim",
            "id": "ANA",
            "conference": "Western",
            "division": "Pacific"
        }, {
            "name": "Thrashers",
            "img": "thrashers",
            "city": "Atlanta",
            "id": "ATL",
            "conference": "Eastern",
            "division": "Southeast"
        }, {
            "name": "Bruins",
            "img": "bruins",
            "city": "Boston",
            "id": "BOS",
            "conference": "Eastern",
            "division": "Northeast"
        }, {
            "name": "Sabres",
            "img": "sabres",
            "city": "Buffalo",
            "id": "BUF",
            "conference": "Eastern",
            "division": "Northeast"
        }, {
            "name": "Flames",
            "img": "flames",
            "city": "Calgary",
            "id": "CGY",
            "conference": "Western",
            "division": "Northwest"
        }, {
            "name": "Hurricanes",
            "img": "hurricanes",
            "city": "Carolina",
            "id": "CAR",
            "conference": "Eastern",
            "division": "Southeast"
        }, {
            "name": "Blackhawks",
            "img": "blackhawks",
            "city": "Chicago",
            "id": "CHI",
            "conference": "Western",
            "division": "Central"
        }, {
            "name": "Avalanche",
            "img": "avalanche",
            "city": "Colorado",
            "id": "COL",
            "conference": "Western",
            "division": "Northwest"
        }, {
            "name": "Bluejackets",
            "img": "bluejackets",
            "city": "Columbus",
            "id": "CBJ",
            "conference": "Western",
            "division": "Central"
        }, {
            "name": "Stars",
            "img": "stars",
            "city": "Dallas",
            "id": "DAL",
            "conference": "Western",
            "division": "Pacific"
        }, {
            "name": "Red Wings",
            "img": "redwings",
            "city": "Detroit",
            "id": "DET",
            "conference": "Western",
            "division": "Central"
        }, {
            "name": "Oilers",
            "img": "oilers",
            "city": "Edmonton",
            "id": "EDM",
            "conference": "Western",
            "division": "Northwest"
        }, {
            "name": "Panthers",
            "img": "panthers",
            "city": "Florida",
            "id": "FLA",
            "conference": "Eastern",
            "division": "Southeast"
        }, {
            "name": "Kings",
            "img": "kings",
            "city": "Los Angeles",
            "id": "LAK",
            "conference": "Western",
            "division": "Pacific"
        }, {
            "name": "Wild",
            "img": "wild",
            "city": "Minnesota",
            "id": "MIN",
            "conference": "Western",
            "division": "Northwest"
        }, {
            "name": "Canadiens",
            "img": "canadiens",
            "city": "Montreal",
            "id": "MTL",
            "conference": "Eastern",
            "division": "Northeast"
        }, {
            "name": "Predators",
            "img": "predators",
            "city": "Nashville",
            "id": "NSH",
            "conference": "Western",
            "division": "Central"
        }, {
            "name": "Devils",
            "img": "devils",
            "city": "New Jersey",
            "id": "NJD",
            "conference": "Eastern",
            "division": "Atlantic"
        }, {
            "name": "Islanders",
            "img": "islanders",
            "city": "New York",
            "id": "NYI",
            "conference": "Eastern",
            "division": "Atlantic"
        }, {
            "name": "Rangers",
            "img": "rangers",
            "city": "New York",
            "id": "NYR",
            "conference": "Eastern",
            "division": "Atlantic"
        }, {
            "name": "Senators",
            "img": "senators",
            "city": "Ottawa",
            "id": "OTT",
            "conference": "Eastern",
            "division": "Northeast"
        }, {
            "name": "Flyers",
            "img": "flyers",
            "city": "Philadelphia",
            "id": "PHI",
            "conference": "Eastern",
            "division": "Atlantic"
        }, {
            "name": "Coyotes",
            "img": "coyotes",
            "city": "Phoenix",
            "id": "PHX",
            "conference": "Western",
            "division": "Pacific"
        }, {
            "name": "Penguins",
            "img": "penguins",
            "city": "Pittsburgh",
            "id": "PIT",
            "conference": "Eastern",
            "division": "Atlantic"
        }, {
            "name": "Sharks",
            "img": "sharks",
            "city": "San Jose",
            "id": "SJS",
            "conference": "Western",
            "division": "Pacific"
        }, {
            "name": "Blues",
            "img": "blues",
            "city": "St. Louis",
            "id": "STL",
            "conference": "Western",
            "division": "Central"
        }, {
            "name": "Lightning",
            "img": "lightning",
            "city": "Tampa Bay",
            "id": "TBL",
            "conference": "Eastern",
            "division": "Southeast"
        }, {
            "name": "Maple Leafs",
            "img": "mapleleafs",
            "city": "Toronto",
            "id": "TOR",
            "conference": "Eastern",
            "division": "Northeast"
        }, {
            "name": "Canucks",
            "img": "canucks",
            "city": "Vancouver",
            "id": "VAN",
            "conference": "Western",
            "division": "Northwest"
        }, {
            "name": "Capitals",
            "img": "capitals",
            "city": "Washington",
            "id": "WSH",
            "conference": "Eastern",
            "division": "Southeast"
        }, {
            "name": "Jets",
            "img": "jets",
            "city": "Winnipeg",
            "id": "WPG",
            "conference": "Eastern",
            "division": "Southeast"
        }];

        typeof $.typeahead === 'function' && $.typeahead({
            input: ".js-typeahead",
            minLength: 0,
            maxItem: 8,
            maxItemPerGroup: 6,
            order: "asc",
            hint: true,
            //cache: true,
            blurOnTab: false,
            searchOnFocus: true,
            //group: ["division", "{{group}} division"],
            group: {
                key: "conference",
                template: function (item) {

                    var conference = item.conference;
                    if (conference.toLowerCase() === "eastern") {
                        conference += " Yay!123";
                    }

                    return conference;
                }
            },
            emptyTemplate: 'no result for {{query}}',
            groupOrder: ["Eastern", "Western"],
            display: ["name", "city", "division"],
            correlativeTemplate: true,
//            dropdownFilter: true,
//            dropdownFilter: 'All Teams',
            dropdownFilter: [{
                key: 'conference',
                template: '<strong>{{conference}}</strong> Conference',
                all: 'All Teams'
            }, {
                key: 'division',
                value: 'Northeast',
                template: '<strong>{{division}}</strong> Division'
            }],
//            dropdownFilter: [
//                {
//                    key: 'conference',
//                    value: 'Western',
//                    template: '<strong>Western</strong> Conference',
//
//                },
//                {
//                    key: 'conference',
//                    value: 'Eastern',
//                    template: '<strong>Eastern</strong> Conference',
//                    all: 'All Teams'
//
//                }
//            ],
            template: '<span>' +
            '<span class="name">{{name}}</span>' +
            '<span class="division">({{city}}, {{division}} division, {{conference}} conference)</span>' +
            '</span>',
            source: {
                teams: {
                    data: data
                }
            },
            debug: true
        });

    </script>

</div>

</body>
</html>